<template>
	<view class="w-flex-col page">
		<view class="w-flex-col group space-y-54 main">
			<view class="w-flex-row space-x-16">
				<view class="w-flex-row w-items-center equal-division-item space-x-4">
					<image class="w-shrink-0 image" src="/static/create/40f57f91ba510e29058d17232a8a33b2.png" />
					<text class="font_1">一键快速连接</text>
				</view>
				<view class="w-flex-row w-items-center equal-division-item_2 space-x-4">
					<image class="w-shrink-0 image" src="/static/create/7a2e5866ab905e7b246a8dba6b6c2643.png" />
					<text class="font_1">无需输入密码</text>
				</view>
				<view class="w-flex-row w-items-center equal-division-item_3 space-x-4">
					<image class="w-shrink-0 image" src="/static/create/7b39035c78e4feaa5a7ec6c94a70fa60.png" />
					<text class="font_1">安全防止蹭网</text>
				</view>
			</view>
			<view class="w-flex-col group_2">
				<view class="info">
					<view class="w-flex-row space-x-26">
						<text class="w-self-start font_1 text txt-center">宣传标语</text>
						<view class="w-flex-auto ">
							<input class="font_1" type="text" placeholder="欢迎来连接我的WIFI" v-model="title">
						</view>
					</view>
					<view class="w-flex-row group_3 view space-x-26">
						<text class="w-self-start font_1 text_2 txt-center">WIFI名称</text>
						<view class="w-flex-auto ">
							<input class="font_1" type="text" placeholder="请输入WIFI名称" v-model="connected">
						</view>
					</view>
					<view class="w-flex-row group_4 space-x-28">
						<text class="w-self-start font_1 text_3 txt-center">WIFI密码</text>
						<view class="w-flex-auto">
							<input class="font_1" type="text" placeholder="输入WIFI密码(wifi要求最少8位)" v-model="pass">
						</view>
					</view>
					<view class="w-flex-row group_3 view_2 space-x-28">
						<text class="w-self-start font_1 text_2 txt-center">店铺名称</text>
						<view class="w-flex-auto view_3">
							<input class="font_1" type="text" placeholder="请输入店铺地址" v-model="store">
						</view>
					</view>
					<!-- <view class="w-flex-row group_3 view_2 space-x-28">
						<view class="w-flex-auto view_3">
							<textarea  placeholder-style="color:#16a085" @blur="bindTextAreaBlur" style="height: 200rpx;" adjust-position=false placeholder="请输入抖音链接" v-model="douyin_url"/>
						</view>
					</view> -->
					<view class="tip">
						<text>提示：密码不会被共享，请放心填写</text>
					</view>
				</view>
				<view class="w-flex-col w-justify-start w-items-center button" @tap="add"><text class="text_4">生成二维码</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	const errCodeMap = {
		'12000': 'WIFI未初始化',
		'12001': '系统不支持',
		'12002': '密码错误',
		'12003': '连接超时',
		'12004': '重复连接Wi-Fi',
		'12005': '未打开Wi-Fi开关',
		'12006': '未打开GPS定位开关',
		'12007': '用户拒绝授权链接Wi-Fi',
		'12008': '无效SSID',
		'12009': '系统运营商配置拒绝连接Wi-Fi',
		'12010': '系统错误',
		'12011': '应用在后台无法配置Wi-Fi',
		'12014': '密码错误',
		'1505005': '密码错误',
	}
	export default {
		components: {},
		data() {
			return {
				connected:'',
				title:'欢迎来连接我的WIFI',
				pass:'',
				store:'',
				id:0,
				qrcode:'',
				longitude:'',
				latitude:'',
				is_linked:false,
				douyin_url:''
			};
		},
		
		onShow() {
			this.goMy()
			// this.getWifiList()
		},
		onLoad(e) {
			uni.showTabBar()
			if (e.hasOwnProperty('id')) {
				this.id = e.id
				this.getWifi()
			}
		},

		methods: {
			getWifiList() {
				uni.startWifi()
				uni.getConnectedWifi({
					success:({wifi})=>{
						this.connected = wifi.SSID;
						// 先关闭
						uni.stopWifi({
							success:(e)=>{
								console.log(e)
							},
							fail:(e)=>{
								console.log(e)
							},
							complete:(e)=>{
								console.log(e)
							}
						})
					},
					fail(err){
						return uni.showToast({
							icon:'none',
							title:'请先连接wifi'
						})
					}
				})
			},
			// 添加数据
			add(){
				var that = this
				let check = this.check()
				if (check !== true) {
					return uni.showToast({
						icon:'none',
						title:check
					})
				}
				uni.showLoading({
					title: '正在保存中...',
				});
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.longitude = res.longitude
						that.latitude = res.latitude
						that.addData()
						// uni.startWifi({
						// 	success:()=>{
						// 		// 效验wifi密码是否正确
						// 		that.connect(); //第一次自动连接
						// 	}
						// })
					}
				});
				
				
			},
			getWifi(){
				uni.showLoading({
					title: '正在加载...',
				});
				this.$http.get('wifione', {params:{ id:this.id}} ).then(res => {
					let one = res.data.data
					this.connected = one.account
					this.title = one.title
					this.pass = one.pass
					this.store = one.store
					this.qrcode = one.qrcode
					this.douyin_url = one.douyin_url
					uni.hideLoading()
				}).catch(err => {
				
				})
			},
			check(){
				if (!this.title) {
					return '请填写宣传标语'
				}
				if (!this.connected) {
					return '请填写wifi名称'
				}
				if (!this.pass) {
					return '请填写wifi密码'
				}else{
					if (this.pass.length < 8) {
						return '密码长度最少8位'
					}
				}
				if (!this.store) {
					return '请填写店铺名称'
				}
				
				return true
			},
			goMy(){
				let token = uni.getStorageSync('token')
				if (!token) {
					uni.showModal({
						title: '还没有登录呢',
						confirmText:'确定',
						showCancel:false,
						success: (res) =>{
							return uni.switchTab({
								url:'/pages/my/my'
							})
						}
					});
					
				}
			},
			connect(maunal = false) {
				uni.showLoading({
					mask: true,
					title: '正在连接'
				})
				let maunalRetry = false;
				// console.log('connectwifi', maunalRetry)
				uni.connectWifi({
					SSID: this.connected,
					password: this.pass,
					maunal: maunal,
					success: (res) => {
						// 已经连接
						if (res.hasOwnProperty('wifiMsg')) {
							if (res.wifiMsg.indexOf('already')) {
								return uni.showToast({
									icon:'none',
									title:'请先手动关闭wifi',
									duration:3000
								})
							}
						}
						console.log('链接wifi结果', res, maunalRetry);
						this.checkLink(maunal, maunalRetry);
					},
					fail: (err) => {
						// 初始化数据
						console.log(err, err.errMsg, errCodeMap['' + err.errCode])
						uni.showToast({
							icon: "none",
							title: errCodeMap['' + err.errCode] || '连接失败',
						})
					},
					complete: () => {
						console.log('链接wificomplete结果', maunalRetry);
					}
				})
			},
			// 检测是否连接
			checkLink(maunal, maunalRetry) {
				uni.startWifi({
					success: () => {
						uni.getConnectedWifi({
							success: ({
								wifi
							}) => {
								// console.log('是否已链接', wifi.SSID, this.wifi.account);
								this.is_linked = (wifi.SSID === this.connected)
								let success = this.is_linked
								let systemInfo = this.getSysOs()
								maunalRetry = !maunal && systemInfo.isAndroid10laest
								// console.log('complete', maunal, systemInfo.isAndroid10laest, success, maunalRetry)
								// 不管什么版本，直接连接成功
								this.connectSuccess(success, maunalRetry)
								// console.log('android 10以上手机第一次自动连接失败时需要手动连接')
								//android 10以上手机第一次自动连接失败时需要手动连接
								this.handelSAndroid10(success, maunalRetry, maunal)
			
								// console.log('没有连接成功，也不是版本问题')
								this.connectFail(success, maunalRetry)
								// 没有连接成功，也不是版本问题
							},
							fail: (err) => {
								// console.log(err)
								this.is_linked = false
								return uni.showToast({
									icon: 'none',
									title: '没有找到wifi/密码错误',
									duration: 5000
								})
							},
						})
					},
					fail: (err) => {
						// console.log('打开wifi失败', err)
						return uni.showToast({
							icon: 'none',
							title: '打开wifi失败'
						})
					}
				})
				// console.log('return', this.is_linked)
			},
			getSysOs() {
				let systemInfo = uni.getSystemInfoSync();
				systemInfo.navbarHeight = systemInfo.platform == 'ios' ? 44 : 48;
				systemInfo.isIOS = systemInfo.system?.toLowerCase().indexOf('ios') > -1;
				systemInfo.isAndroid = systemInfo.system?.toLowerCase().indexOf('android') > -1;
				if (systemInfo.isAndroid) {
					try {
						systemInfo.isAndroid10laest = Number(systemInfo.osVersion) >= 10
					} catch (err) {
						systemInfo.isAndroid10laest = true;
					}
				}
				// console.log('系统信息',systemInfo)
				return systemInfo
			},
			// 连接成功
			connectSuccess(success, maunalRetry) {
				if (success) {
					uni.hideLoading();
					this.addData()
					return uni.showToast({
						icon: 'none',
						title: '连接成功'
					})
				}
				if (success || !maunalRetry) {
					// console.log('complete3', success, maunalRetry)
					uni.hideLoading();
					if (success) {
						this.addData()
						return uni.showToast({
							icon: 'none',
							title: '连接成功'
						})
					} else {
						return uni.showToast({
							icon: 'none',
							title: '没有找到wifi/密码错误',
							duration: 5000
						})
					}
				}
			},
			// android 10版本
			handelSAndroid10(success, maunalRetry, maunal) {
				// 没有成功，没有跳转并且安卓10，没有跳转
				if (!success && maunalRetry && !maunal) {
					uni.hideLoading();
					return uni.showModal({
						title: '连接WIFI',
						confirmText: '跳转',
						content: `密码已复制,请手动选中【${this.wifi.account}】粘贴密码连接`,
						success: ({
							confirm
						}) => {
							if (confirm) {
								uni.setClipboardData({
									data: this.wifi.pass,
									success() {
										uni.startWifi({
											success: () => {
												// console.log('打开wifi成功')
												this.connect(true)
											},
											fail: (err) => {
												// console.log('打开wifi失败', err)
											}
										});
									}
								})
							}
						}
					})
				}
			},
			connectFail(success, maunalRetry) {
				if (!success && !maunalRetry) {
					uni.hideLoading();
					return uni.showToast({
						icon: 'none',
						title: '没有找到wifi/密码错误',
					})
				}
			},
			addData(){
				this.$http.post('addwifi', {title:this.title, account: this.connected, pass:this.pass, store:this.store, id:this.id, longitude:this.longitude, latitude:this.latitude, douyin_url:this.douyin_url} ).then(res => {
							if (res.data.code == 0) {
								return uni.showToast({
									icon:'none',
									title:res.data.msg
								})
							}
							if (!this.id) {
								this.id = res.data.data.id
								this.qrcode = res.data.data.qrcode
							}
							uni.hideLoading()
							uni.redirectTo({
								url:"/pages/share/share?id=" + this.id + '&qrcode=' + this.qrcode
							})
				}).catch(err => {
				
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #f9f9f9;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.main {
			margin-top: 30rpx;
		}

		.image {
			width: 32rpx;
			height: 32rpx;
		}

		.image_2 {
			margin-left: 30rpx;
		}

		.group {
			padding: 18rpx 34rpx 640rpx 34rpx;
			overflow-y: auto;

			.txt-center {
				display: flex;
				align-items: center;
				height: 36rpx;
			}

			.space-x-16 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-left: 32rpx;
				}

				.equal-division-item {
					flex: 1 1 213rpx;
				}

				.space-x-4 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 8rpx;
					}
				}

				.equal-division-item_2 {
					flex: 1 1 213rpx;
				}

				.equal-division-item_3 {
					flex: 1 1 213rpx;
				}
			}

			.group_2 {
				margin-top: 35rpx;

				.info {
					background-color: #ffffff;
					padding: 48rpx;
					border-radius: 20rpx;
					.tip{
						color: green;
						margin-top: 60rpx;
						font-size: 28rpx;
					}
				}

				.space-x-26 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 52rpx;
					}

					.text {
						margin-top: 4rpx;
					}
				}

				.group_3 {
					padding: 0 4rpx;

					.picker {
						color: #ffffff;
					}

					.text_2 {
						margin-top: 4rpx;
					}

					.section {
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #f21818;
						border-radius: 10rpx;
						width: 100rpx;
						height: 50rpx;
						border: solid 2rpx #f21818;
					}

					.view_3 {
						margin-right: 12rpx;
					}
				}

				.view {
					margin-top: 82rpx;
				}

				.group_4 {
					margin-top: 80rpx;

					.text_3 {
						margin-top: 4rpx;
					}
				}

				.space-x-28 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 56rpx;
					}
				}

				.search {
					margin-right: 16rpx;
					background-color: #ffffff;
					width: 414rpx;
					height: 50rpx;
					border: solid 2rpx #000000;
				}

				.view_2 {
					margin-top: 90rpx;
				}

				.button {
					margin: 50rpx 0;
					padding: 36rpx 0 32rpx;
					background: radial-gradient(circle, #22b14C, #22b14C); 
					border-radius: 10rpx;

					.text_4 {
						color: #f7f2f2;
						font-size: 32rpx;
						font-family: SourceHanSansCN;
						line-height: 30rpx;
					}
				}
			}

			.font_1 {
				font-size: 28rpx;
				font-family: SourceHanSansCN;
				line-height: 26rpx;
				color: #000000;
			}
		}

		// .space-y-54 {
		//   & > view:not(:first-child),
		//   & > text:not(:first-child),
		//   & > image:not(:first-child) {
		//     margin-top: 20rpx;
		//   }
		// }
	}
</style>